import React from "react";
import styles from "./Input.module.less";

import { NRequireLabel } from "@/components/Uikit";
import { type TextInputProps, TextInput } from "@mantine/core";
import classNames from "classnames";
import { mergeClassNames } from "../tools";

export type NInputProps = TextInputProps;
const NInput1 = React.forwardRef(
  (
    { className, label, withAsterisk, required, error, ...restProps }: NInputProps,
    ref: React.LegacyRef<HTMLInputElement>,
  ) => {
    return (
      <>
        {label ? (
          <NRequireLabel required={required} withAsterisk={withAsterisk} label={label} />
        ) : (
          ""
        )}
        <TextInput
          ref={ref}
          {...restProps}
          className={classNames(className ? styles[className] : null, className)}
          classNames={mergeClassNames(styles, restProps.classNames)}
        />
        {error && <div className={`mt-4 flex items-center ${styles["error"]}`}>{error}</div>}
      </>
    );
  },
);
NInput1.displayName = "NInput";

export const NInput = React.memo(NInput1);
